 <template>
  <card title="文章列表" class="p-0 border-0" header-class="bg-white border-0" footer-class="d-none">
    <table class="table table-bordered">
      <thead class="table-dark text-center">
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>类目</th>
          <th>热门</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="text-center table-hover">
        <tr v-for="(article,index) in articles" :key="index">
          <td>{{index+1}}</td>
          <td>{{article.title}}</td>
          <td>{{categories[article.category].title}}</td>
          <td>
            <custom-switch :data-id="`hot${index}`" v-model="article.hot"></custom-switch>
          </td>
          <td>
            <router-link class="btn btn-primary btn-sm" :to="`/article/edit/${index}`">编辑</router-link>
            <button class="btn btn-danger btn-sm" @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </card>
</template>
<script>
import Card from "@/components/Card";
import CustomSwitch from "@/components/CustomSwitch";
export default {
  name: "ArticleList",
  components: {
    Card,
    CustomSwitch
  },
  data: function() {
    return {
      // root
      articles: this.$parent.articles,
      categories: this.$parent.categories
    };
  },
  methods: {
    del(index) {
      if (window.confirm("确认删除")) {
        this.articles.splice(index, 1);
      }
    }
  }
};
</script>